<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>制作QQ会员页面导航</title>
		<style type="text/css">
			header{
				margin: 0px auto;
				padding: 0px;
			}
			div{
				margin: 10px;
				color: white;
				width: 100%;
				height: 50px;
				background: #666666;
				color: ragba(0,0,0,0.5);
				background-size:contain;
				border: 1px #00F dashed;
			}
			img{
				padding-left: 30px;
				width: 100px;
				height:10px
				border:1px solid red;
				clear:left;
			}
		    img,p{vertical-align: middle;}
			p{
				/* float:left; */
				color: #FFFFFF;
			display: inline;
				padding-bottom: 20px;
				padding-left:10px ;
			}
			a{
				color:white;
			}
		a:link{	
				text-decoration: none; }
		a:hover{
			color:blue;
		}
		#denglu{
			width: 50px;
			height: 20px;
			border: 1px solid yellow;
			border-radius:20px 20px 20px 20px;
			text-align: center;
		}#chaojihuiyuan{
			width: 70px;
			height: 30px;
			border: 1px solid yellow;
			border-radius:20px 20px 20px 20px;
			text-align: center;
			background: yellow;
		}
		
		</style>
	</head>
	<body>
		<header>
		<div>
			<nav>
				<p><img src="logo.png" ></p>
				<p><a href="">功能特权</a></p>
				<p><a href="">游戏特权</a></p>
				<p><a href="">生活特权</a></p>
				<p><a href="">会员活动</a></p>
				<p><a href="">成长体系</a></p>
				<p><a href="">年费专区</a></p>
				<p><a href="">超级会员</a></p>
				<p><a href="#"><span id="denglu">登录</span></a></p>
				<p><a href="#"><span id="chaojihuiyuan">开通超级会员 </span></a></p>
			</nav>		
		</div>
		</header>
    </body>
</html>